﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> 
  <meta http-equiv="Pragma" content="no-cache" /> 
  <meta http-equiv="Expires" content="0" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
  <title>智能工厂</title>

  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">

  <!-- 自定义样式 -->
  <style>
    *{
		margin: 0;
		padding: 0;
	}
	html,body{
		height: 100%;
	}
	
    #download{
		width: 60px;
        position: fixed;
        bottom:100px;
        left:0;
        right:0;
        margin:0 auto;
    }
	#weixin-tip {
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.8);
			filter: alpha(opacity=80);
			width: 100%;
			height: 100%;
			z-index: 100;
	}

	#weixin-tip p {
		text-align: center;
		margin-top: 10%;
		padding: 0 5%;
	}
  </style>
</head>

<body>
  <div id="app" style="height: 100%;">
    <!-- 模板 -->
    <div class="download" style="height: 100%;">
        <van-swipe :autoplay="3000" style="height: 100%;">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img :src="image" style="width: 100%;height: 100%;"/>
			</van-swipe-item>
			<template #indicator>
				<!-- <div class="custom-indicator">{{ current + 1 }}/4</div> -->
				<div></div>
			  </template>
          </van-swipe>
        <van-button id="download" @click="download" color="linear-gradient(to right, #ff6034, #ee0a24)">
            下载
        </van-button>
		<div id="weixin-tip" style="display:none;">
		<p><img src="live_weixin.png" style="width:99%" alt="微信打开" /></p>
		</div>
    </div>
  </div>

  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>

  <script>
    // 初始化 Vue 实例
    new Vue({
      el: '#app',

      data() {
        return {
            MyBrowser:{},
            images: [
                '1.jpg',
                '2.jpg',
                '3.jpg',
                '4.jpg',
            ],
			//接口请求地址
			androidPath:'http://106.12.208.213:9090/appManage/appUpdate/latestVersion2?appcode=',
			iosPath:'',
			fileName:'',
			filePath:'',
        };
      },
      created(){
		let isWeixin = this.is_weixin();
		if (isWeixin) {
			let weixinTip = document.getElementById('weixin-tip');
			weixinTip.style.display = 'block';
		}
		let appcode = this.getQueryVariable("appcode");
		if(appcode=='qypt'){
		this.fileName = '区域平台';
		this.filePath = 'http://106.12.208.213:9090/downloadapp/区域平台v1.0.1.apk';
		this.iosPath = '';
		}else{
		this.fileName = '智能工厂';
		this.androidPath +=appcode?appcode:'yudu';
		this.iosPath = 'https://itunes.apple.com/cn/app/id1516242557?mt=8';
		}
		document.title =  this.fileName;
        
        /*
		 * 智能机浏览器版本信息:
		 */
		this.MyBrowser = {
			versions: function () {
				let u = navigator.userAgent, app = navigator.appVersion;
				return {//移动终端浏览器版本信息
					trident: u.indexOf('Trident') > -1, //IE内核
					presto: u.indexOf('Presto') > -1, //opera内核
					webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
					gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
					mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
					ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
					android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
					iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
					iPad: u.indexOf('iPad') > -1, //是否iPad
					webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
				};
			}(),
			language: (navigator.browserLanguage || navigator.language).toLowerCase()
        };
      },

      methods: {
		/**
		 * 获取url参数
		 **/
		getQueryVariable(variable){
			var query = window.location.search.substring(1);
			var vars = query.split("&");
			for (var i=0;i<vars.length;i++) {
					var pair = vars[i].split("=");
					if(pair[0] == variable){return pair[1];}
			}
			return(false);
		},
		/**
		 * 下载点击事件 
		 **/
		async download(){
			if (this.MyBrowser.versions.ios || this.MyBrowser.versions.iPhone || this.MyBrowser.versions.iPad) {
				this.downloadByA(this.iosPath);
			} else {
				if(this.fileName!='区域平台'){
					this.filePath = await this.getAndroidPath();
				}
			this.downloadByA(this.filePath);
			}
		},
          downloadByA(path){
			  if(path&&path!=''){
				const a = document.createElement('a'); // 创建a标签
				a.setAttribute('download', this.fileName);// download属性
				a.setAttribute('href', path);// href链接
				a.click();// 自执行点击事件
			  }else{
				  alert('正在开发中，敬请期待！');
			  }
          },
		  getAndroidPath() {
			return new Promise((resolve, reject) => {
				let xhr = new XMLHttpRequest();
				xhr.onreadystatechange = () => {
					if (xhr.readyState === 4) {
						if (xhr.status === 200) {
							resolve(xhr.response);
						}
					}
				};
				xhr.open("get", this.androidPath, true);
				xhr.send(null);
			});	
		},
		is_weixin() {
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				return true;
			} else {
				return false;
			}
        },
      }
    });
  </script>
</body>
</html>
